import React, { Component } from 'react'
import Header from './components/Header'
import Footer from './components/Footer'
import List from './components/List'
export default class App extends Component {
  state = {
    todos:[
      {id:'001',name:'吃饭',done:true},
      {id:'002',name:'睡觉',done:true},
      {id:'003',name:'打代码',done:false},
    ]
  }
  getListData =(todoObj)=>{
    //console.log('App',todoObj)
    const {todos} = this.state
    //追加
    this.setState({
      todos:[todoObj,...todos]
    })

  }
  //checked or uncheck
  updateTodo = (id,done)=>{
    const {todos} = this.state
    const newTodos = todos.map((todoObj)=>{
      if(id===todoObj.id) return {...todoObj,done}
      else return todoObj

    })
    this.setState({
      todos:newTodos
    })
  }

  deleteTodo = (id)=>{
    //console.log('App delete==>',id)
    const {todos} = this.state
    /*
    const newTodos = todos.map((obj,index)=>{
      if(id===obj.id){
        //delete obj
        
      }
      console.log(index)
      return obj
    })
    */
    const newTodos = todos.filter((obj)=>{
      return obj.id!==id
    })
    this.setState({
      todos:newTodos
    })
  }
  //全选择
  checkTodo = (flag)=>{
    const {todos} = this.state
    const newTodos = todos.map((todoObj)=>{
      const done = flag
      return {...todoObj,done}
    })
    console.log('checkTodo==>',flag);
    this.setState({todos:newTodos})
  }
  //删除全部完成的
  deleteAlldoneTodo = ()=>{
    const {todos} = this.state
    const newTodos = todos.filter((obj)=>{
      return obj.done === false
    })
    this.setState({
      todos:newTodos
    })
  }

  render() {
    const {todos} = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header getListData={this.getListData}/>
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
          <Footer todos={todos} checkTodo={this.checkTodo} deleteAlldoneTodo={this.deleteAlldoneTodo}/>
        </div>
      </div>
    )
  }
}
